<template>
  <div class="main">
    <div class="data">
      <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
        <el-radio-button label="1">日榜</el-radio-button>
        <el-radio-button label="2">周榜</el-radio-button>
      </el-radio-group>
      <div class="block">
        <el-date-picker v-model="value1" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="search">
        <el-input
                placeholder="请输入关键词搜索"
                v-model="input3"
                class="input-with-select"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>

      <div style="display:flex"><label data-v-0b039b64="" class="el-checkbox option_check"
                                       style="margin-left: 1px;"><span
              class="el-checkbox__input"><span class="el-checkbox__inner"></span><input type="checkbox"
                                                                                        aria-hidden="false"
                                                                                        class="el-checkbox__original"
                                                                                        value=""></span><span
              class="el-checkbox__label">不看蓝V<!----></span></label></div>

    </div>
    <el-popover
            placement="right-end"
            title="热门主播榜介绍:"
            width="800"
            trigger="hover"
    >
      <p>
        热门主播榜挖掘了周期时间内表现较为突出的红人主播，并设置了直播销量、直播销售额、涨粉数等多种排序功能，供用户全方位评估上榜主播的带货能力、吸粉能力及变现能力。
      </p>

      <p slot="reference" style="font-size: 14px">
        淘宝/天猫 - {{ this.title }}【 统计时间: 9月29日】<i
              class="el-icon-question"
      ></i>
      </p>
    </el-popover>
    <div class="btn">
      <button class="btn1"><i class="el-icon-download"></i>导出</button>
    </div>
    <hr style="height: 1px; border: none; border-top: 1px dashed #ececec"/>
    <div class="cate">
      <span>商品分类</span>
      <el-radio-group v-model="radio2" size="small">
        <el-radio-button label="全部"></el-radio-button>
        <el-radio-button label="家居建材"></el-radio-button>
        <el-radio-button label="家用家电"></el-radio-button>
        <el-radio-button label="美妆个护"></el-radio-button>
        <el-radio-button label="时尚配饰"></el-radio-button>
        <el-radio-button label="潮流男鞋"></el-radio-button>
        <el-radio-button label="精品女装"></el-radio-button>
        <el-radio-button label="居家内衣"></el-radio-button>
        <el-radio-button label="图书教育"></el-radio-button>
        <el-radio-button label="宠物用品"></el-radio-button>
        <el-radio-button label="食品酒饮"></el-radio-button>
        <el-radio-button label="母婴用品"></el-radio-button>
        <el-radio-button label="运动户外"></el-radio-button>
        <el-radio-button label="鞋靴箱包"></el-radio-button>
        <el-radio-button label="汽车用品"></el-radio-button>
        <el-radio-button label="手机数码"></el-radio-button>
        <el-radio-button label="其他好货"></el-radio-button>
      </el-radio-group>
    </div>
    <hr style="height: 1px; border: none; border-top: 1px dashed #ececec"/>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="top" label="排名"></el-table-column>
        <el-table-column prop="date" label="视频标题" width="300"></el-table-column>
        <el-table-column prop="name" label="视频点赞增量">
        </el-table-column>
        <el-table-column prop="province" label="达人">
        </el-table-column>
        <el-table-column prop="city" label="观看人数">
        </el-table-column>
        <el-table-column prop="address" label="获取点赞数">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                    type="text"
                    size="small"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeName: "0",

        tabPosition: "1",
        value1: "",
        input3: "",
        radio2: "全部",
        options: [
          {
            value: "<1000",
            label: "<1000",
          },
          {
            value: "1000-5000",
            label: "1000-5000",
          },
          {
            value: "5000-1W",
            label: "5000-1W",
          },
          {
            value: "1W-5W",
            label: "1W-5W",
          },
          {
            value: ">5W",
            label: ">5W",
          },
        ],
        tableData: [
          {
            top: "1",
            date: "如何解套",
            name: "11111",
            province: "财经小可爱海云",
            city: "103.6w",
            address: "1588.5w",
          },
          {
            top: "2",
            date: "再见“墩墩”？你对冰墩墩有哪些记忆？",
            name: "11111",
            province: "财经小可爱海云",
            city: "103.6w",
            address: "1588.5w",
          },
          {
            top: "3",
            date: "如何解套",
            name: "11111",
            province: "财经小可爱海云",
            city: "103.6w",
            address: "1588.5w",
          },
          {
            top: "4",
            date: "烈士纪念日向人民英雄敬献花篮仪式举行",
            name: "11111",
            province: "财经小可爱海云",
            city: "103.6w",
            address: "1588.5w",
          },{
            top: "5",
            date: "习近平等党和国家领导人出席",
            name: "11111",
            province: "财经小可爱海云",
            city: "103.6w",
            address: "1588.5w",
          }
        ],
        value: "",
        title: "直播销量榜",
      };
    },
    methods: {
      handleClick(tab) {
        let ind = tab.index;
        if (ind == 0) {
          this.title = "直播销量榜";
        }
        if (ind == 1) {
          this.title = "直播销售额榜";
        }
        if (ind == 2) {
          this.title = "直播获赞榜";
        }
        if (ind == 3) {
          this.title = "观看人次榜";
        }
        if (ind == 4) {
          this.title = "直播涨粉榜";
        }
      },
    },
  };
</script>

<style lang="less" scoped>
  .main :deep(.is-active) {
    color: #506eff;
  }

  .main :deep(.el-tabs__active-bar) {
    background-color: #506eff;
  }

  .table {
    margin-top: 15px;
  }

  .data {
    width: 750px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    border-left: 4px solid #506eff;

    .el-radio-group {
      margin-bottom: 0 !important;
    }

    :deep(.el-radio-button__inner) {
      padding: 9px 15px;
    }

    :deep(.el-input__inner) {
      height: 35px !important;
    }
  }

  .search {
    width: 650px;
    display: flex;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 15px;

    span {
      width: 102px;
      color: #303133;
      font-weight: 700;
      font-size: 14px;
      margin-right: 20px;
    }
  }

  .cate {
    width: 1538px;
    display: flex;
    align-items: center;

    :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
      background-color: #506eff;
      display: inline-block;
      height: 32px;
      line-height: 32px;
      margin: 0 12px 6px 0;
      border-radius: 8px;
      padding: 0 6px;
      cursor: pointer;
    }

    span {
      width: 102px;
      color: #303133;
      font-weight: 700;
      font-size: 14px;
    }

    :deep(.el-radio-button--small .el-radio-button__inner) {
      display: inline-block;
      height: 32px;
      line-height: 32px;
      margin: 0 12px 6px 0;
      border-radius: 8px;
      padding: 0 6px;
      cursor: pointer;
      border: 0;
      font-size: 14px;
    }

    :deep(.el-radio-button--small .el-radio-button__inner):hover {
      background-color: #506eff;
      color: #fff;
    }
  }

  .cate1 {
    width: 93%;
    display: flex;
    align-items: center;

    :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
      background-color: #506eff;
      display: inline-block;
      height: 32px;
      line-height: 32px;
      margin: 0 12px 6px 0;
      border-radius: 8px;
      padding: 0 6px;
      cursor: pointer;
    }

    span {
      width: 7%;
      color: #303133;
      font-weight: 700;
      font-size: 14px;
    }

    :deep(.el-radio-button--small .el-radio-button__inner) {
      display: inline-block;
      height: 32px;
      line-height: 32px;
      margin: 0 12px 6px 0;
      border-radius: 8px;
      padding: 0 6px;
      cursor: pointer;
      border: 0;
      font-size: 14px;
    }

    :deep(.el-radio-button--small .el-radio-button__inner):hover {
      background-color: #506eff;
      color: #fff;
    }
  }

  .sel {
    width: 607px;
    margin-bottom: 15px;

    :deep(.el-input__inner) {
      width: 400px;
    }
  }

  .table {
    color: black;

    :deep(.el-table thead) {
      color: black;
    }
  }
</style>